<template>
  <div class="workbench-container">
    <!-- 页面标题 -->
    <h2>数据可视化看板</h2>

    <!-- 图表区域 -->
    <div class="charts-wrapper">
      <!-- 饼图 -->
      <div class="chart-card">
        <div class="chart-header">
          <span>员工人数分布（按部门）</span>
        </div>
        <div id="pieChart" class="chart-content" style="width: 100%; height: 350px;"></div>
      </div>

      <!-- 柱状图 -->
      <div class="chart-card">
        <div class="chart-header">
          <span>楼宇与企业数量统计</span>
        </div>
        <div id="barChart" class="chart-content" style="width: 100%; height: 350px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import * as echarts from 'echarts';

export default {
  mounted() {
    this.$nextTick(() => {
      this.drawPieChart();
      this.drawBarChart();
    });
  },
  methods: {
    drawPieChart() {
      const chartDom = document.getElementById('pieChart');
      if (!chartDom) return;
      const myChart = echarts.init(chartDom);

      const data = [
        { value: 335, name: '技术部' },
        { value: 310, name: '人事部' },
        { value: 274, name: '财务部' },
        { value: 235, name: '市场部' },
        { value: 400, name: '运营部' }
      ];

      const option = {
        title: {
          text: '员工人数分布（按部门）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    },

    drawBarChart() {
      const chartDom = document.getElementById('barChart');
      if (!chartDom) return;
      const myChart = echarts.init(chartDom);

      const buildingData = [120, 200, 150, 80, 70];
      const companyData = [100, 180, 130, 90, 60];
      const xAxisData = ['A栋', 'B栋', 'C栋', 'D栋', 'E栋'];

      const option = {
        title: {
          text: '楼宇与企业数量统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['楼宇数', '企业数'],
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '楼宇数',
            type: 'bar',
            data: buildingData
          },
          {
            name: '企业数',
            type: 'bar',
            data: companyData
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.workbench-container {
  padding: 20px;
  background-color: #f9f9f9;

  h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }

  .charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }

  .chart-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: calc(50% - 10px); /* 平均两列 */
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .chart-header {
    padding: 12px 20px;
    background-color: #f1f1f1;
    font-weight: bold;
    color: #555;
    border-bottom: 1px solid #ddd;
  }

  .chart-content {
    padding: 10px 20px;
  }
}
</style>
